<template>
  <div>
    <div id="tips">
      <h1 style="font-size: 20px;">欢迎入住涤尘小筑，如果您已拥有账户，则可点击
        <router-link to="/login">登录</router-link>
      </h1>
      <div class="divider"></div>
    </div>
    <div class="registration-form">
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <h1 style="font-size: 25px;">上传头像</h1>
          <label for="avatar">头像：</label>
          <input type="file" id="avatar" @change="handleFileUpload">
          <img v-if="avatarPreview" :src="avatarPreview" alt="Avatar Preview" class="avatar-preview">
        </div>
        <div class="form-group">
          <label for="nicheng">昵称：</label>
          <input type="text" id="nicheng" v-model="formData.nicheng" required>
          <span v-if="!checknichengLength(formData.nicheng)">长度是3~8个字符</span>
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="formData.password" required>
          <span v-if="!checkPasswordLength(formData.password)">密码不超过12位</span>
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码：</label>
          <input type="password" id="confirm-password" v-model="formData.confirmPassword" required>
          <span v-if="!checkPasswordMatch(formData.password, formData.confirmPassword)">密码不匹配</span>
        </div>
        <div class="form-group">
          <label for="name">姓名：</label>
          <input type="text" id="name" v-model="formData.username" required>
<!--          <span v-if="!checkNameNotEmpty(formData.username)">姓名不能为空</span>-->
        </div>
        <div class="form-group">
          <label>性别：</label>
          <input type="radio" id="male" value="male" v-model="formData.gender">
          <label for="male">男</label>
          <input type="radio" id="female" value="female" v-model="formData.gender">
          <label for="female">女</label>
        </div>
        <div class="form-group">
          <label for="phone">手机号：</label>
          <input type="tel" id="phone" v-model="formData.phone" required>
          <span v-if="!checkPhoneNumberFormat(formData.phone)">手机号格式不正确</span>
        </div>
        <div class="form-group">
          <button type="submit" class="action-button">注册</button>
          <button type="reset" class="action-button" @click="handleReset">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL="http://localhost:8880";

export default {
  name: 'RegistrationForm',
  data() {
    return {
      formData: {
        nicheng: '',
        password: '',
        confirmPassword: '',
        username: '',
        gender: '',
        phone: '',
      },
      avatarPreview: null,
    };
  },
  methods: {
    checknichengLength(nicheng) {
      return nicheng.length >= 3 && nicheng.length <= 8;
    },
    checkPasswordLength(password) {
      return password.length <= 12;
    },
    checkPasswordMatch(password, confirmPassword) {
      return password === confirmPassword;
    },
    // checkNameNotEmpty(username) {
    //   return username.trim().length > 0;
    // },
    checkPhoneNumberFormat(phone) {
      const phoneRegex = /^[1][3-9]\d{9}$/;
      return phoneRegex.test(phone);
    },
    handleSubmit() {
      if (!this.checknichengLength(this.formData.nicheng)) {
        alert('昵称长度必须是3到8个字符，请重新输入！');
        return;
      }
      if (!this.checkPasswordLength(this.formData.password)) {
        alert('密码长度不能超过12位，请重新输入！');
        return;
      }
      if (!this.checkPasswordMatch(this.formData.password, this.formData.confirmPassword)) {
        alert('密码和确认密码不匹配，请重新输入！');
        return;
      }
      // if (!this.checkNameNotEmpty(this.formData.name)) {
      //   alert('姓名不能为空，请重新输入！');
      //   return;
      // }
      if (!this.checkPhoneNumberFormat(this.formData.phone)) {
        alert('手机号格式不正确，请重新输入！');
        return;
      }
      // alert('注册成功！');
      console.log('提交表单数据：', this.formData);
      axios.post('user', this.formData)
      .then(res => {
        const info = res.data.formData
        if (info.code !== 20000) {
          Message({
            message: info.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
        } else {
          const token = info.data.token
          const TokenKey = 'test_token'
          Cookies.set(TokenKey, token)
          this.$router.push('/Home')
        }
      })
      .catch(() => {
        // 处理请求错误
      });

      },

    handleReset() {
  this.formData = {
    nicheng: '',
    password: '',
    confirmPassword: '',
    name: '',
    gender: '',
    phone: '',
  };
  this.avatarPreview = null; // 重置头像预览
},

    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.formData.avatar = file;
        this.avatarPreview = URL.createObjectURL(file);
      }
    },
  }
};
</script>

<style scoped>
.registration-form {
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 20px;
}
.avatar-preview {
  max-width: 200px;
  margin-top: 10px;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}
.action-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.action-button:hover {
  background-color: #0056b3;
}
</style>
